<template>
  <!-- 章节详情组件页面 -->
  <div class="course-and-lesson">
    <!-- 章节名称 -->
    <h2 class="section" v-text="sectionData.sectionName"></h2>

    <!-- 课时列表 -->
    <p class="lesson" v-for="item in sectionData.courseLessons" :key="item.id" @click="handleVideo(item)">
      <!-- 课时名称 -->
      <span v-text="item.theme"></span>
      <!-- 图标 -->
      <!-- 播放图标 -->
      <van-icon v-if="item.canPlay" name="play-circle" size="20"></van-icon>
      <!-- 锁住图标 -->
      <van-icon v-else name="lock" size="20"></van-icon>
    </p>
  </div>
</template>

<script>
// 导入 vant 组件
import { Icon } from 'vant'

export default {
  name: 'SectionAndLesson',
  components: {
    VanIcon: Icon // vant 的 van-icon 组件
  },
  props: {
    // 章节详情数据
    sectionData: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 点击播放按钮事件
    handleVideo (lessonInfo) {
      // 当课程能播放
      if (lessonInfo.canPlay) {
        // 路由跳转
        this.$router.push({
          name: 'CourseVideo',
          params: {
            lessonId: lessonInfo.id
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 主体样式
.course-and-lesson {
  padding: 0 15px;

  // 课时列表样式
  .lesson {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
